<template>
  <div id="login">
    <div class="title">
      <h3>登录</h3>
      <span style="font-weight: 500">首先欢迎你的来访，这里有个简单的登录~</span>
      <p>昵称绑定账号，暂不支持修改。</p>
      <p>Email作为账号，没有激活操作，从简！意味着乱输也行~ 希望能给个真实的，保不准啥时候就做邮箱推送。</p>
      <p>没有密码，输入昵称账号即可。再次登录以账号为准，昵称以初次设置的为准。</p>
      <p>是不是很简单？Email既是账号也是密码。至于账号被别人登录了？邮箱绝对保密，别人不会知道的！以我的评论数，估计也不会碰巧~</p>
    </div>

    <div class="login">
      <h5>登录信息</h5>
      <el-form ref="form" :model="form" :rules="rules" label-width="50px" size="mini">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" placeholder="请输入昵称" maxlength="10" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="contact">
          <el-input v-model="form.contact" placeholder="请输入Email" maxlength="30" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-input v-model="form.avatar" placeholder="请输入头像链接" maxlength="255" show-word-limit></el-input>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" size="mini" plain @click="onLogin()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "login.vue",
    data() {
      return {
        title: '登录',
        form: {
          nickname: '',
          email: '',
          avatar: '',
        },
        rules: {
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
          ],
          contact: [
            { required: true, message: '请输入Email', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          avatar: [
            {min: 10, max: 255, message: '长度在 10 到 255 个字符', trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      async onLogin() {
        // 表单验证
        this.$refs['form'].validate(async (valid) => {
          if (!valid) {
            this.$message.error('验证失败！')
            return
          }
          let data = {
            nickname: this.form.nickname,
            contact: this.form.contact,
            avatar: this.form.avatar,
            contactType: 2,
          }
          // let res = await this.$api.login(this.$common.filterParam(data))
          let res = {"token":"/qr7CqMo5LAKdeGXl2kFvG87F4joXryEt1hivv0y1SM=","userInfo":{"avatar":"http://cdn.itspire.cn/avatar_1602748921550_1597302549650.jpg","nickname":"test2"}}
          this.$store.dispatch('setLogin', res)
          if (this.$route.query.redirect) {
            this.$router.replace({ path: this.$route.query.redirect })
          } else {
            this.$router.replace({ name: 'index' })
          }
        })
      }
    }
  }
</script>

<style scoped>
  #login {
    text-align: left;
  }

  .title {
    padding: 10px 20px;
  }

  .login {
    padding: 0 20px;
  }
</style>
